<template>
	<view class="content">
		<view class="pay_price">
			<view>
				<text class="unit">￥<text class="price">{{Payinfo.money || '0.00'}}</text></text>
			</view>
			<text class="text-content">支付剩余时间14:55</text>
		</view>
		<view class="pay_back">
			<view>
				<u--image :showLoading="true" src="../../static/Mine/wx.png" width="48rpx" height="48rpx"
					radius="0"></u--image>
				<text>微信支付</text>
			</view>
			<label class="radio">
				<radio value="r1" checked="true" style="transform: scale(0.8);" />
			</label>
		</view>
		<button class="pay" @click="wxH5pay(Payinfo)" :style="{'background':$store.state.buttonColor}">确认支付</button>
	</view>
</template>

<script>
	import jWeixin from '../../js_sdk/jweixin-module'
	import {
		redirectUrl,
		sharingdata
	} from '../../api/login.js';
	import {
		getShareOrderData
	} from '../../api/Mine.js';
	import {
		fitness_course_add
	} from '../../api/Teacher.js';
	export default {
		data() {
			return {
				order_id: '',
				shop_id: '',
				Payinfo: {}
			}
		},
		onLoad(options) {
			this.order_id = options.order_id || 0;
			this.getWeChatCode();
		},
		methods: {
			/**
			@method 公众号授权登录
			**/
			async redirectUrl() {
				try {
					const res = await redirectUrl({
						order_id:this.order_id
					});
					if (res?.data) {
						window.location.href = res.data;
					}
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			getWeChatCode() {
				let code = this.getUrlCode('token');
				if (code == null) {
					this.redirectUrl();
				} else {
					this.sendCode(code)
				}
			},
			//方法:用来提取code
			getUrlCode(name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) ||
				[, ''
				])[1].replace(/\+/g, '%20')) || null
			},
			getpower() {
				let local = encodeURIComponent(window.location.href); //获取当前页面地址作为回调地址
				let appid = '';
				window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid +
					'&redirect_uri=' + local + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
			},
			sendCode(code) {
				uni.setStorageSync('token', code);
				if(this.getUrlCode('shop_id')){
					this.shop_id = this.getUrlCode('shop_id');
					uni.setStorageSync('shop_id', this.getUrlCode('shop_id'));
				}
				this.getShareOrderData(this.order_id);
				console.log('打印code');
				console.log(code);
			},
			/**
			@method 获取order_id
			**/
			async getShareOrderData(order_id = null) {
				try {
					const res = await getShareOrderData({
						order_id: order_id
					});
					res.data = {
						...res.data,
						...{
							shop_id: this.shop_id
						}
					};
					this.fitness_course_add(res.data);
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/**
			@method 调起微信支付
			**/
			async fitness_course_add(Payinfo = {}) {
				try {
					const res = await fitness_course_add(Payinfo);
					this.Payinfo = {
						...this.Payinfo,
						...res.data,
						...{
							money: res.data.pay_price
						}
					};
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			wxH5pay(res) {
				var _this = this;
				jWeixin.config({
					debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,线上环境需要改为false
					appId: res.appId, // 必填，公众号的唯一标识
					timestamp: res.timestamp, // 必填，生成签名的时间戳
					nonceStr: res.nonceStr, // 必填，生成签名的随机串
					signature: res.paySign, // 必填，签名
					jsApiList: ['chooseWXPay'], // 必填，需要使用的JS接口列表
				});
				jWeixin.ready(() => {
					jWeixin.chooseWXPay({
						appId: res.appId, // 必填，公众号的唯一标识
						timestamp: res.timestamp,
						nonceStr: res.nonceStr, // 支付签名随机串，不长于 32 位
						package: res.package, // 统一支付接口返回的prepay_id参数值
						signType: res.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
						paySign: res.paySign, // 支付签名
						success: function(res) { //支付成功回调
							uni.showToast({
								title: '支付成功',
								icon: 'none',
								duration: 2000,
							});
							uni.switchTab({
								url: '/pages/Tabbar/Home/Home'
							});
						},
						cancel: function(res) {
							uni.showToast({
								title: '取消支付',
								icon: 'none',
								duration: 2000,
							})
							alert('取消支付')
						},
						fail: function(res) {
							console.log("fail", res);
							uni.showToast({
								title: '支付失败',
								icon: 'none',
								duration: 2000,
							});
							uni.switchTab({
								url: '/pages/Tabbar/Home/Home'
							});
						}
					});
				});
			}
		}
	}
</script>

<style>
	page {
		background-color: #f7f7f7;
	}
</style>
<style scoped lang="scss">
	button::after{ border: none;} 
	.content {
		#qrcode {
			margin: 0rpx auto;
			margin-top: 50rpx;
		}

		.pay_price {
			view {
				width: 100%;
				display: flex;
				justify-content: center;
				margin-top: 100rpx;
				margin-bottom: 10rpx;
			}

			.unit {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 40rpx;
				color: #202020;
				text-align: center;
			}

			.price {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 80rpx;
				color: #202020;
				text-align: center;
			}

			.text-content {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #888888;
				text-align: center;
				display: block;
			}
		}

		.pay_back {
			width: 85%;
			padding: 30rpx;
			background-color: #fff;
			margin: 0px auto;
			display: flex;
			border-radius: 20rpx;
			justify-content: space-between;
			align-items: center;
			margin-top: 100rpx;

			view {
				display: flex;
				align-items: center;

				text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #101010;
					margin-left: 20rpx;
				}
			}
		}

		.pay {
			width: 95%;
			height: 96rpx;
			position: fixed;
			bottom: 20rpx;
			left: 2.5%;
			// background-color: #2183fe;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			border-radius: 50rpx;
		}

		.popupBody {
			.headersBody {
				display: flex;
				justify-content: space-between;
				background-color: #ebf7ff;
				padding: 30rpx;
				border-top-left-radius: 30rpx;
				border-top-right-radius: 30rpx;

				text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 32rpx;
					color: #202020;
				}
			}

			.Newqrcode {
				width: auto;
				height: auto;
				margin: 0px auto;
				// background-color: #000000;
				margin-top: 40rpx;

			}

			.buttonFlex {
				margin-top: 100rpx;
				margin-bottom: 10rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.leftButton {
					width: 40%;
					height: 75rpx;
					margin: 0px;
					background-color: #efefef;
					color: #333;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 50rpx;
					font-size: 28rpx;
					letter-spacing: 2rpx;
				}

				.rightButton {
					width: 40%;
					height: 75rpx;
					margin: 0px;
					// background-color: #277ffe;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 50rpx;
					font-size: 28rpx;
					letter-spacing: 2rpx;
				}
			}
		}
	}
</style>